<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>组件</title>
    </head>
    <body>
        <script src="../libs/vue.js" charset="utf-8"></script>
        <!-- 注册 -->
        <!-- <div id="example">
            <my-component></my-component>
        </div>

            //定义
            var MyComponent = Vue.extend({template: '<div> A custom component! </div>'})
            //注册
            Vue.component('my-component', MyComponent);
            //创建根实例
            new Vue({el: '#example'})
       -->

        <!-- 局部注册 -->
        <!-- <div id="example">
            <my-component></my-component>
        </div>
        <script>
            var Child = Vue.extend({template: '<div> A custom component! </div>'})
            var Parent = Vue.extend({
                components: {
                    'my-component': Child
                }
            })
            new Parent({
              el:"#example"
            })
        </script> -->

        <!-- 注册语法糖 -->
        <!-- <div id="example">
            <my-component></my-component>
        </div>
        <script>
            //全局
            Vue.component('my-component', {template: '<div> A custom component! </div>'});
            new Vue({el: "#example"})
            //局部
            var Parent = Vue.extend({
                components: {
                    'my-component': {
                        template: '<div> A custom component! </div>'
                    }
                }
            })
            new Parent({el: "#example"})
        </script> -->

    </body>
</html>
